<script setup lang="ts">
import { useChartAutoResize } from '@/mixins/MixinChartAutoResize'
import type { VChartInstance } from '@/types'
import VueEcharts from 'vue-echarts'

const props = defineProps<{
  data: any[]
  baseLineValue: number
}>()

const tanpanchaStore = useTanpanchaStore()
const designStore = useDesignStore()
const option = computed(() => {
  const data = props.data
  const mark = props.baseLineValue
  // echarts 柱图option
  return {
    title: {
      text: '碳排趋势',
      left: 10,
      top: 10,
    },
    legend: {
      left: 'center',
      top: 20,
    },
    tooltip: {
      trigger: 'item',
    },
    xAxis: {
      type: 'category',
      data: Array(12).fill(1).map((_, i) => `${i + 1}月`),
    },
    yAxis: {
      type: 'value',
      name: `单位：${tanpanchaStore.panchaUnit}`,
      nameTextStyle: {
        align: 'left',
      },
    },
    grid: {
      top: 80,
      left: 50,
      right: 80,
      bottom: 40,
      containLabel: true,
    },
    series: [
      {
        name: '月度碳排量',
        type: 'bar',
        data,
      },
      {
        name: '配额基线',
        type: 'line',
        data: Array(12).fill(mark),
        showSymbol: false,
        itemStyle: {
          show: false,
        },
        lineStyle: {
          type: 'dashed',
          width: 1,
        },
        markLine: {
          silent: true,
          data: [
            {
              name: '配额基线',
              type: 'average',
              lineStyle: {
                color: '#f7f494',
              },
            },
          ],
        },
      },
    ],
  }
})

const chartRef = ref<VChartInstance>()

useChartAutoResize(chartRef)
</script>

<template>
  <VueEcharts
    ref="chartRef"
    :option="option" :init-options="{
      locale: 'zh',
    }" :theme="designStore.theme"
  />
</template>
